<template>
  <!-- 登陆页面 -->
  <div class="view-page">
    <module-header></module-header>
    <div class="login-box">
      <h1 class="login-title">登陆</h1>
      <el-form
        class="login-from"
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        label-position="top"
        label-width="50px"
        label-height="20px"
      >
        <el-form-item label="账号" prop="tel">
          <el-input v-model="loginForm.tel" placeholder="请输入您的账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="psw">
          <el-input v-model="loginForm.psw" placeholder="请输入您的密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <el-button class="login-btn" @click="loginClick()">登陆</el-button>
    </div>
    <module-footer></module-footer>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
export default {
  data() {
    return {
      loginForm: {
        tel: "",
        psw: ""
      },
      loginRules: {
        tel: [
          {
            validator: (rule, value, callback) => {
              var myReg = /^1[123456789]\d{9}$/;
              if (!value) {
                callback(new Error("请输入手机号码"));
                callback();
              } else if (myReg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号码"));
              }
            },
            trigger: "blur"
          }
        ],
        psw: [
          {
            validator: (rule, value, callback) => {
              var myReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
              if (value) {
                if (myReg.test(value)) {
                  callback();
                } else {
                  callback(new Error("密码必须是6-16位字母数字组合"));
                }
              } else {
                callback(new Error("请输入密码"));
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: {
    ModuleHeader,
    ModuleFooter
  },
  methods: {
    loginClick() {
      let _this = this;
      _this.$refs.loginForm.validate(function(va, ob) {
        if (va) {
          let param = {
            tel: _this.loginForm.tel,
            psw: _this.loginForm.psw
          };
          _this.$api.user.login(param).then(res => {
            if (res.data.code == 200) {
              _this.$message.success(res.data.msg);
              _this.$refs.loginForm.resetFields();
              /*
               *跳转至首页
               */
              _this.$router.push("/");
            } else {
              _this.$message.error(res.data.msg);
            }
          });
        } else {
          _this.$message.error("请确认表单信息无误");
        }
      });
    }
  },

  computed: {},

  created() {},

  mounted() {}
};
</script>
<style lang="less" scoped>
.view-page {
  width: 100%;
  background-color: #05193d;
  .login-box {
    width: 464px;
    height: 386px;
    margin: 20vh auto;
    padding: 24px 32px;
    background-color: #fff;
    border-radius: 4px;
    .login-title {
      color: #666;
      font-weight: 400;
      font-size: 32px;
      height: 44px;
      line-height: 44px;
    }
    .login-btn {
      width: 100%;
      margin-top: 15px;
    }
    .tool-box {
      display: flex;
      justify-content: space-between;
      .hint-text {
        font-size: 12px;
        color: steelblue;
        line-height: 25px;
      }
    }
  }
}
</style>
